<template>
	<view class="uni-bg-red" hover-class="uni-bg-green" hover-start-time="2000" hover-stay-time="3000">
		<text>测试点击态</text>
	</view>
	<view class="box">
		<view class="text-box"><text>文字使用text组件包括是一个好习惯，是的，这样方便后续转换时，代码出现错误</text></view>
	</view>
	<view v-for="(item,index) in list" :key="index">
		<text>{{ item.name }} {{ item.age }}</text>
	</view>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
const title = 'button';
const loading = ref(true);
let list = ref([])
setTimeout(() => {
	list.value = [
		{
			name: '小红',
			age: 10
		},
		{
			name: '小明',
			age: 11
		},
		{
			name: '小李',
			age: 11
		}
	]
}, 2000)
</script>

<style lang="scss" scoped>
.box {
	background-color: $uni-color-primary;
	color: white;
	height: 160rpx;
	width: 375rpx;
	margin-top: 50rpx;
	.text-box {
		line-height: 12px; // 行高设置在外层才起作用
		text {
			margin-left: 40rpx; // 生效
			margin-top: 0rpx; // 不生效
			font-size: 12px;
			// line-height: 12px; // 这样设置行高不起作用
		}
	}
}
</style>
